<template>
  <view class="report-page">
    <view class="header-section">
      <image
        src="https://apizx01.sc798.com/Resource/assets/cbg/top-img.png"
        mode="aspectFill"
        class="header-bg"
      />
    </view>
    <view class="main-content">
      <view class="empty-state" v-if="!isEmpty">
        <view class="folder-icon">
          <image
            src="https://apizx01.sc798.com/Resource/assets/cbg/file.png"
            mode="aspectFit"
            class="folder-img"
          />
        </view>
        <view class="empty-text">
          <view class="empty-title">暂无企业</view>
          <view class="empty-desc">信息添加企业查看相关信息</view>
        </view>
        <view class="add-button" @click="handleAddEnterprise">
          <image src="https://apizx01.sc798.com/Resource/assets/cbg/add.png" mode="aspectFit" class="add-icon" />
          <text class="add-text">添加企业</text>
        </view>
      </view>
      <view class="report-list" v-else>
        <view class="enterprise-bar">
          <view class="enterprise-info">
            <image
              src="https://apizx01.sc798.com/Resource/assets/cbg/h.png"
              mode="aspectFit"
              class="enterprise-logo"
            />
            <text class="enterprise-name">湖北宏泰集团有限公司</text>
          </view>
          <view class="switch-icon">
            <image
              src="https://apizx01.sc798.com/Resource/assets/cbg/h.png"
              mode="aspectFit"
              class="switch-img"
            />
          </view>
        </view>
        <view class="reports-container">
          <view class="report-item" @click="handleReportClick('basic')">
            <text class="report-name">基础征信报告</text>
            <view class="report-action">
              <text class="action-text">请查看</text>
              <image src="https://apizx01.sc798.com/Resource/assets/cbg/rig.png" mode="aspectFit" class="arrow" />
            </view>
          </view>
          <view class="report-item" @click="handleReportClick('tax')">
            <text class="report-name">税票解析报告</text>
            <view class="report-action">
              <text class="action-text">请查看</text>
              <image src="https://apizx01.sc798.com/Resource/assets/cbg/rig.png" mode="aspectFit" class="arrow" />
            </view>
          </view>
          <view class="report-item" @click="handleReportClick('financial')">
            <text class="report-name">财务解析报告</text>
            <view class="report-action">
              <text class="action-text">请查看</text>
              <image src="https://apizx01.sc798.com/Resource/assets/cbg/rig.png" mode="aspectFit" class="arrow" />
            </view>
          </view>
          <view class="report-item" @click="handleReportClick('carbon')">
            <text class="report-name">企业碳信用报告</text>
            <view class="report-action">
              <text class="action-text">请查看</text>
              <image src="https://apizx01.sc798.com/Resource/assets/cbg/rig.png" mode="aspectFit" class="arrow" />
            </view>
          </view>
          <view class="report-item" @click="handleReportClick('supplier')">
            <text class="report-name">供应商风险报告</text>
            <view class="report-action">
              <text class="action-text">请查看</text>
              <image src="https://apizx01.sc798.com/Resource/assets/cbg/rig.png" mode="aspectFit" class="arrow" />
            </view>
          </view>
          <view class="report-item" @click="handleReportClick('growth')">
            <text class="report-name">企业成长报告</text>
            <view class="report-action">
              <text class="action-text">请查看</text>
              <image src="https://apizx01.sc798.com/Resource/assets/cbg/rig.png" mode="aspectFit" class="arrow" />
            </view>
          </view>
          <view class="report-item" @click="handleReportClick('credit')">
            <text class="report-name">信贷尽调报告</text>
            <view class="report-action">
              <text class="action-text">请查看</text>
              <image src="https://apizx01.sc798.com/Resource/assets/cbg/rig.png" mode="aspectFit" class="arrow" />
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'

const isEmpty = ref(false)

const handleAddEnterprise = () => {
  isEmpty.value = true
}
const handleReportClick = (reportType) => {
  uni.navigateTo({
    url:'/pages/subpkg/ReportClassify/index',
  })
  console.log('点击了报告:', reportType)
}
</script>

<style lang="scss" scoped>
.report-page {
  height: 100vh;
  background-color: #f4f5f7;
  .header-section {
    position: relative;
    height: 21vh;
    overflow: hidden;
    .header-bg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
  }
  .main-content {
    .empty-state {
      padding-top: 120rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      .folder-icon {
        .folder-img {
          width: 240rpx;
          height: 240rpx;
        }
      }
      .empty-text {
        text-align: center;
        margin: -60rpx 0 60rpx;
        font-size: 25rpx;
        color: #b7becd;
        .empty-title {
          margin-bottom: 6rpx;
        }
      }
      .add-button {
        background-color: #2b6fea;
        color: #fff;
        padding: 20rpx 100rpx;
        border-radius: 60rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4rpx 12rpx rgba(49, 130, 206, 0.3);
        transition: all 0.3s ease;
        gap: 15rpx;
        &:active {
          transform: scale(0.98);
          box-shadow: 0 2rpx 8rpx rgba(49, 130, 206, 0.4);
        }
        .add-icon {
          width: 30rpx;
          height: 30rpx;
        }
        .add-text {
          font-size: 28rpx;
        }
      }
    }
    .report-list {
      padding: 0 30rpx;
      .enterprise-bar {
        background-color: #fff;
        border-radius: 12rpx;
        padding: 24rpx 30rpx;
        margin: 30rpx 0 20rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
        border: 1rpx solid #296afd;
        .enterprise-info {
          display: flex;
          align-items: center;
          .enterprise-logo {
            width: 72rpx;
            height: 72rpx;
            margin-right: 16rpx;
          }
          .enterprise-name {
            font-size: 28rpx;
            color: #333;
            font-weight: bold;
          }
        }
        .switch-icon {
          .switch-img {
            width: 40rpx;
            height: 40rpx;
          }
        }
      }
      .reports-container {
        .report-item {
          background-color: #fff;
          border-radius: 12rpx;
          padding: 30rpx 40rpx 30rpx 30rpx;
          margin-bottom: 20rpx;
          display: flex;
          align-items: center;
          justify-content: space-between;
          box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
          transition: all 0.3s ease;
          &:active {
            transform: scale(0.98);
            box-shadow: 0 1rpx 4rpx rgba(0, 0, 0, 0.1);
          }
          .report-name {
            font-size: 28rpx;
            color: #333;
          }
          .report-action {
            display: flex;
            align-items: center;
            .action-text {
              font-size: 28rpx;
              color: rgba(51, 51, 51, 0.6);
              margin-right: 10rpx;
            }
            .arrow {
              width: 14rpx;
              height: 24rpx;
            }
          }
        }
      }
    }
  }
}
</style>
